<template>
    <div>
        <!-- 顶部搜索 -->
        <div class="source-search-base">
            <div @click="conditionCheck(4)" class="one">
                <span class="singleSee">{{countryName}}</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <div  class="two">
                <span @click="houseSourceSearch" class="fa fa-search"></span>
                <!-- <span>请输入国家地区</span> -->
                <input style=" left: 10px;position: relative;padding-left:5px" @click="homeSearch" readonly="readonly" type="text" :placeholder="$route.query.name">
            </div>
            <img class="three" src="../../assets/img/tixing.png" alt />
        </div>
        <!-- 四大筛选栏 -->
        <div class="condition">
            <div class="condition-left">
                <div
                    @click="conditionColor = index;conditionCheck(index)"
                    v-for="(item,index) in condition"
                    :key="index"
                    :class="[conditionColor == index?'chooseColor':'']"
                >
                    <span>{{item | deleteMoney}}</span>
                    <span class="fa fa-angle-down"></span>
                </div>
            </div>
            <div class="condition-right">
                <img src="../../assets/img/paixu.png" alt />
            </div>
        </div>
        <!-- 地区列表 -->
        <div class="scroll-range" style="height:76vh">
            <sourceList :screeningCondition="screeningCondition"></sourceList>
        </div>
        <!-- 地区 -->
        <transition name="fade">
            <div @click="conditionCheck(0)" class="conditon-type" v-show="show0">
                <transition name="down2">
                    <div style="height:40vh" class="source-areas-list" v-show="show0">
                        <div class="source-areas-list-left">
                            <p
                                @click="setCountrys(index,item.id)"
                                :class="{chooseColor:index == areaColor}"
                                v-for="(item,index) in areaList"
                                :key="index"
                            >{{item.name}}</p>
                        </div>
                        <div class="source-areas-list-right">
                            <p @click="buXianGet" v-show="buXian" class="chooseColor">不限</p>
                            <p
                                @click="getCityID(index,item.name,item.id)"
                                :class="{chooseColor:index == citysColor}"
                                v-for="(item,index) in areaCitys"
                                :key="index"
                            >{{item.name}}</p>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 国家-->
        <transition name="fade">
            <div @click="conditionCheck(4)" class="conditon-type countrysTop" v-show="show4">
                <transition name="down2">
                    <div v-show="show4" class="source-size-list">
                        <p
                            @click="getCountry(index,item.name,item.id)"
                            :class="{chooseColor:index == priceColor}"
                            v-for="(item,index) in countryList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item.name}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 价格-->
        <transition name="fade">
            <div @click="conditionCheck(1)" class="conditon-type" v-show="show1">
                <transition name="down2">
                    <div v-show="show1" class="source-size-list source-price">
                        <div>
                            <p
                            @click="getPrice(index,item)"
                            :class="{chooseColor:index == priceColor}"
                            v-for="(item,index) in priceList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item | deleteMoney}}</p>
                        </div>
                        <div class="choose-price">
                            <span>自定义价格</span>
                            <input
                                @click.stop="event.stopPropagation();"
                                type="text"
                                placeholder="最小"
                            />
                            <input
                                @click.stop="event.stopPropagation();"
                                type="text"
                                placeholder="最大"
                            />
                            <mt-button type="primary" size="small">确认</mt-button>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 户型-->
        <transition name="fade">
            <div @click="conditionCheck(2)" class="conditon-type" v-show="show2">
                <transition name="down2">
                    <div v-show="show2" class="source-size-list">
                        <p
                            @click="getSize(index,item)"
                            :class="{chooseColor:index == sizeColor}"
                            v-for="(item,index) in sizeList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 更多-->
        <transition name="fade">
            <div class="conditon-type" v-show="show3">
                <transition name="down2">
                    <div class="source-more-list" v-show="show3">
                        <!-- 类型和面积 -->
                        <div
                            v-for="(item,index) in moreNum"
                            :key="index"
                            class="source-more-list-detail"
                        >
                            <p>{{item.name}}</p>
                            <span
                                @click="setColor(index,idx, v.id,moreNum)"
                                :class="v.now?'moreColor':''"
                                v-for="(v,idx) in item.nameList"
                                :key="idx"
                            >{{v.label | deleteWord }}</span>
                        </div>
                        <!-- 销售状态 -->
                        <div
                            v-for="(item,index) in saleStatus"
                            :key="index+'1'"
                            class="source-more-list-detail"
                        >
                            <p>{{item.name}}</p>
                            <span
                                :class="saleColor == idx?'moreColor':''"
                                v-for="(v,idx) in item.nameList"
                                :key="idx"
                                @click="saleColor = idx,saleId = v.id"
                            >{{v.label}}</span>
                        </div>
                        <!-- 新旧程度 -->
                        <div
                            v-for="(item,index) in newOldStatus"
                            :key="index+'2'"
                            class="source-more-list-detail"
                        >
                            <p>{{item.name}}</p>
                            <span
                                :class="newOldColor == idx?'moreColor':''"
                                v-for="(v,idx) in item.nameList"
                                :key="idx"
                                @click="newOldColor = idx,newOldId = v.id"
                            >{{v.label}}</span>
                        </div>
                        <div class="source-more-btn">
                            <div @click="setReset">重置</div>
                            <div @click="submitComfirm">确定</div>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>
    </div>
</template>


<script>
import sourceList from "../../components/sourceList";
export default {
    name: "sources",
    data() {
        return {
            conditionColor: "-1",
            show0: false,
            show1: false,
            show2: false,
            show3: false,
            show4: false,
            condition: ["地区", "价格", "户型", "更多"],
            bgTopOne: "90",
            //价格
            priceColor: 0,
            priceContent: "",
            priceList: [
                "全部",
                "50",
                "50-100",
                "100-200",
                "200-300",
                "300-500",
                "700-1000",
                "50-100",
                "100-200",
                "200-300",
                "300-500",
                "700-1000",
                "1000"
            ],
            //户型
            sizeColor: 0,
            sizeContent: "",
            sizeList: ["不限", "一室", "二室", "三室", "四室"],
            //更多
            propertyId: [], //物业所选id
            areaId: [], //面积所选id
            moreNum: [
                //物业类型
                {
                    name: "物业类型",
                    nameList: []
                },
                //面积选择
                {
                    name: "面积(m²)",
                    nameList: [
                        { id: 1, label: "50" },
                        { id: 2, label: "50-100" },
                        { id: 3, label: "100-200" },
                        { id: 4, label: "200" }
                    ]
                }
            ],
            //销售状态
            saleColor: "-1",
            saleId: "",
            saleStatus: [
                {
                    name: "销售状态",
                    nameList: [
                        { id: 0, label: "预售" },
                        { id: 1, label: "在售" },
                        { id: 2, label: "售完" }
                    ]
                }
            ],
            //新旧层度
            newOldColor: "-1",
            newOldId: "",
            newOldStatus: [
                {
                    name: "新旧程度",
                    nameList: [
                        { id: 0, label: "新房" },
                        { id: 1, label: "二房" }
                    ]
                }
            ],
            //地区
            citysColor: "-1",
            areaColor: 0,
            areaCitys: [], //地区right
            areaList: [], //地区left
            areaID: "140",
            buXian: true,
            //国家
            countryList: [],
            countryName: "美国",
            countryId: "140",
            //筛选条件
            screeningCondition: "",
            
        };
    },
    components: {
        sourceList
    },
 
    created() {
        //获取全球国家列表
        this.gainCountryList();
        //初始化左侧地区
        this.gainCityList(this.areaID, 3);
        //获取物业类型
        this.getPropertyTypes();
        //初始化搜索条件
        this.searchHouseList();
        
       
    },
    mounted() {},
    methods: {
        // 搜索跳转
        homeSearch(){
           this.$router.push({ name: "homeSearch" });
        },
        
        //搜索条件
        searchHouseList() {
            var properArr = "";
            properArr = this.propertyId.join(",");
            console.log(properArr);
            var params = {
                page: 1,
                rows: 10,
                propertyTypes: properArr,
                acreage: "",
                salesStatus: this.saleId,
                oldNewType: this.newOldId,
                countryCityId: this.areaID,
                houseType: this.sizeContent,
                priceRange: this.priceContent,
                filterContent:this.$route.query.name
                
            };
            this.screeningCondition = params;
            console.log(params);
        },
        //全球国家列表
        gainCountryList() {
            var params = {
                page: 1,
                rows: 250,
               
                
            };
            this.$axios
                .get(this.address.gainListCountrys, { params: params })
                .then(res => {
                    this.countryList = res.data.data;
                });
        },
        //获取左侧地区
        getCountry(index, name, id) {
            this.priceColor = index;
            this.countryName = name;
            this.condition[0] = "地区";
            this.areaCitys = [];
            this.citysColor = "-1";
            this.areaColor = "0";
            this.buXian = true;
            //选择国家后重置筛选项
            // this.propertyId = ''
            // this.saleId = ''
            // this.newOldId =''
            // this.sizeContent=''
            // this.priceContent='',
            //点击国家下拉列表获取新的国家下的地区
            this.areaID = id;
            this.searchHouseList();
            this.areaList = this.gainCityList(id, 3);
           console.log(this.buXian,525252)
        },
        //左侧点击事件获取右侧
        setCountrys(index, cityId) {
            this.areaColor = index;
            this.citysColor = "-1";
            this.searchHouseList();
            this.gainCityList(cityId, 4);
            event.stopPropagation();
        },
        //右侧点击获取id
        getCityID(index, name, id) {
            this.citysColor = index;
            this.condition[0] = name;
            this.areaID = id;
            this.searchHouseList();
            console.log(this.areaID);
        },
        //获取地区列表（3为left，4为right）
        gainCityList(id, level) {
            var params = {
                page: 1,
                rows: 250,
                level: level,
                countryId: id
            };
            this.$axios
                .get(this.address.gainCityList, { params: params })
                .then(res => {
                    // console.log(res.data.data);
                    if (level == 3) {
                        var alls = {
                            name: "全部",
                            id: "-1"
                        };
                        res.data.data.unshift(alls);
                        this.areaList = res.data.data;
                        this.searchHouseList();
                    } else if (level == 4) {
                        this.areaCitys = res.data.data;
                        this.areaCitys.length <= 0?(this.buXian = true):(this.buXian = false);

                        this.searchHouseList();
                    }
                });
        },
        //电机地区不限
        buXianGet() {
            this.gainCityList(this.areaID, 3);
        },
        //总价
        getPrice(index, price) {
            this.priceColor = index;
            this.condition[1] = price;
            if (price == "全部") {
                this.priceContent = "";
                this.searchHouseList();
            } else {
                this.priceContent = price;
                this.searchHouseList();
            }
            console.log(this.priceContent);
        },
        //户型
        getSize(index, size) {
            this.sizeColor = index;
            this.condition[2] = size;
            if (size == "不限") {
                this.sizeContent = "";
                this.searchHouseList();
            } else {
                this.sizeContent = size;
                this.searchHouseList();
            }
        },
        //更多
        //获取物业类型
        getPropertyTypes() {
            this.$axios.get(this.address.propertyTypes).then(res => {
                //console.log(res.data);
                for (var i = 0; i < res.data.data.length; i++) {
                    res.data.data[i].label = res.data.data[i].name;
                }
                this.moreNum[0].nameList = res.data.data;
                this.gainNow(this.moreNum);
            });
        },
        //更多的确定
        submitComfirm() {
            this.submitListId(this.moreNum);
            console.log(this.saleId, "销售");
            console.log(this.newOldId, "新旧");
            this.conditionCheck(3);
            this.searchHouseList();
        },
        //更多的重置
        setReset() {
            //重置物业和面积
            this.setResetId(this.moreNum);
            //重置销售状态
            (this.saleId = ""), (this.saleColor = "-1");
            (this.newOldId = ""), (this.newOldColor = "-1");
        },
        // 2
        //给更多赋值状态
        gainNow(list) {
            for (var i = 0; i < list.length; i++) {
                list[i].nameList.forEach((item, index) => {
                    this.$set(item, "now", false);
                });
                list[0].nameList.forEach((item, index) => {
                    this.$set(item, "zero", "zero");
                });
                list[1].nameList.forEach((item, index) => {
                    this.$set(item, "one", "one");
                });
            }
            // console.log(list);
        },
        //给更多改变颜色状态
        setColor(index, idx, id, list) { 
            var now = list[index].nameList[idx].now;
            list[index].nameList[idx].now = !now;
        },
        //确定 获取所选Id
        submitListId(list, listId, listName) {
            for (var i = 0; i < list[0].nameList.length; i++) {
                if (list[0].nameList[i].now) {
                    this.propertyId.push(list[0].nameList[i].id);
                }
            }
            for (var i = 0; i < list[1].nameList.length; i++) {
                if (list[1].nameList[i].now) {
                    this.areaId.push(list[1].nameList[i].label);
                }
            }
            this.propertyId = Array.from(new Set(this.propertyId));
            this.areaId = Array.from(new Set(this.areaId));
            //this.areaId[0] = this.areaId[0].substring(0,this.areaId[0].length-2)
            console.log(this.propertyId, "物业");
            console.log(this.areaId, "面积");
        },
        //重置
        setResetId(list) {
            for (var i = 0; i < list.length; i++) {
                list[i].nameList.forEach((item, index) => {
                    this.$set(item, "now", false);
                });
                this.propertyId = [];
                this.areaId = [];
            }
        },
        //下拉列表显示与隐藏
        conditionCheck(index) {
            // this.
            //console.log(index)
            switch (index) {
                case 0:
                    this.show0 = !this.show0;
                    this.show1 = false;
                    this.show2 = false;
                    this.show3 = false;
                    this.show4 = false;
                    break;
                case 1:
                    this.show1 = !this.show1;
                    this.show0 = false;
                    this.show2 = false;
                    this.show3 = false;
                    this.show4 = false;
                    break;
                case 2:
                    this.show2 = !this.show2;
                    this.show0 = false;
                    this.show1 = false;
                    this.show3 = false;
                    this.show4 = false;
                    break;
                case 3:
                    this.show3 = !this.show3;
                    this.show0 = false;
                    this.show1 = false;
                    this.show2 = false;
                    this.show4 = false;
                    break;
                case 4:
                    this.show4 = !this.show4;
                    this.show0 = false;
                    this.show1 = false;
                    this.show2 = false;
                    this.show3 = false;
                    break;
            }
        },
        //搜索框搜索
        houseSourceSearch(){        
            this.$axios.get(this.address.searchArea,{
                params:{
                   countryName :this.$route.query.name
                     }
            }).then(res => {
                console.log(res.data)
            if(res.data.code==200){
               this.searchHouseList();
              
            }
            }) 
        }
    },
    filters: {
        deleteWord(val) {
            if (val == "50") {
                return val + "以下";
            } else if (val == "200") {
                return val + "以上";
            } else {
                return val;
            }
        },
        deleteMoney(val) {
            if (val == "50") {
                return val + "万以下";
            } else if (val == "1000") {
                return val + "万以上";
            } else if (val.indexOf("-") >= 0) {
                return val + "万";
            } else {
                return val;
            }
        }
    }
};
</script>
<style lang="less" scoped>
.source-areas-list {
    //border-top: 1px solid @blackColor3;
    width: 100%;
    max-height: 40vh;
    background-color: @white;
    overflow-y: scroll;
    .flexBetween();
    div {
        width: 50%;
        padding: 10px 15px;
        height: 100%;
        overflow-y: scroll;
    }
    p {
        font-size: 14px;
        color: @blackColor8;
        padding: 1.5vh 0;
    }
    .source-areas-list-right {
        background-color: @blackColor3;
    }
}
.source-size-list {
    width: 100%;
    max-height: 40vh;
    background-color: @white;
    overflow-y: scroll;
    //border-top: 1px solid @blackColor3;
    .source-size-list-detail {
        font-size: 14px;
        text-align: center;
        padding: 2.5vh 0;
    }
}

.source-more-list {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    //border-top: 1px solid @blackColor3;
    .source-more-list-detail {
        padding: 10px 15px 10px;
        border-bottom: 1px solid @blackColor3;
        margin-bottom: 10px;
        p:nth-child(1) {
            color: @blackColor8;
            font-size: 16px;
            margin-bottom: 15px;
        }
        span {
            display: inline-block;
            color: @blackColor8;
            font-size: 14px;
            border: 1px solid @blackColor3;
            border-radius: 20px;
            padding: 4px 20px;
            margin: 0 20px 10px 0;
        }
    }
}
.source-more-btn {
    height: 58px;
    width: 100%;
    padding: 4px 15px;
    margin: 20px 0;
    border-top: 1px solid @blackColor3;
    .flexBetweenCenter();
    div {
        margin-top: 10px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        border-radius: 4px;
    }
    div:nth-child(1) {
        width: 35%;
        height: 40px;
        border: 1px solid @blackColor3;
    }
    div:nth-child(2) {
        width: 62%;
        height: 40px;
        color: @white;
        background-color: @blueColor5;
    }
}
//更多
.moreColor {
    background-color: @blueColor5;
    border: 1px solid @blueColor5 !important;
    color: @white !important;
}
.countrysTop {
    top: 7vh;
    height: 93vh;
}
// -----
.singleSee {
    display: inline-block;
}
.source-price {
    height: 260px !important;
    max-height: 100vh !important;
    position: relative;
    div:first-child{
        max-height: 200px;
        overflow: scroll;
    }
    .choose-price {
        .flexBetweenCenter();
        padding: 15px;
        font-size: 12px;
        color: @blackColor5;
        position: absolute;
        left: 0;
        bottom: 0;
        input {
            display: inline-block;
            width: 20%;
            padding: 6px 4px !important;
            background-color: @blackColor1 !important;
            font-size: 12px;
            border: none;
            text-align: center;
        }
    }
}
.source-search-base,.condition{
    height: 50px;
}
</style>
